<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="3">
          <el-input placeholder="请输入名称" size="small" class="input-with-select" v-model="queryInfo.name" clearable
                    @clear="getCategoryList"/>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" size="small" style="margin-left: 10px;" @click="getCategoryList">搜索</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" size="small" @click="showEditDialog('')">添加</el-button>
        </el-col>
      </el-row>
      <el-table :data="categoryList" border stripe>
        <el-table-column label="ID" prop="id" width="70"></el-table-column>
        <el-table-column label="标题" prop="name"></el-table-column>
        <el-table-column label="副标题" prop="subName"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="Y"
                inactive-value="N"
                @change="updateStatus(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="修改时间" prop="modifyTime" width="150"></el-table-column>
        <el-table-column label="修改" width="100">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="删除">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteCategory(scope.row.id)"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="顺序" prop="sortNum">
          <template slot-scope="scope">
            <el-button
                type="text"
                size="small"
                @click="moveUp(scope.row, scope.$index)"
                :disabled="scope.$index === 0">上移</el-button>
            <el-button
                type="text"
                size="small" style="margin-left:16px"
                @click="moveDown(scope.row, scope.$index)"
                :disabled="getFormLength(scope.$index)" >下移</el-button>
          </template>
        </el-table-column>

      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryInfo.pageNo" :page-sizes="[5, 10, 20, 40, 60]"
                     :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>

    <el-dialog title="分类信息" :visible.sync="editDialogVisible" width="40%" @close="editDialogClosed">
      <el-form :model="editForm"  ref="editFormRef" label-width="90px" class="demo-ruleForm">
        <el-form-item label="标题" prop="name">
          <el-input v-model="editForm.name" style="width: 80%;"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="editForm"  ref="editFormRef" label-width="90px" class="demo-ruleForm">
        <el-form-item label="副标题" prop="subName">
          <el-input v-model="editForm.subName" style="width: 80%;"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveCategory()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Api from "@/api/MemberCharge.js";

export default {
    data() {
      return {
        drawer: false,
        dialogVisible: false,
        disabled: false,
        queryInfo: {
          id: "",
          name:'',
          pageNo: 1,
          pageSize: 40, // 页大小
        },
        editDialogVisible: false,
        editForm: {
          id: ''
        },
        categoryList: [],
        total: 0
      };
    },
    created() {
      this.getCategoryList();
    },
    methods: {
      getCategoryList() {
        Api.getMemberChargeCategoryList(this.queryInfo).then((res) => {
          if (res.success) {
            this.categoryList = res.data.records;
            this.total = res.data.total;
          } else {
            return this.$message.error("获取列表失败");
          }
        });
      },
      saveCategory() {
        Api.saveMemberChargeCategory(this.editForm).then((res) => {
          if (res.success) {
            this.$message.success("保存成功");
            this.editDialogVisible = false;
            this.getCategoryList();
          } else {
            return this.$message.error("保存失败：" + res.msg);
          }
        });
      },
      updateStatus(row) {
        Api.setMemberChargeCategoryStatus({'id':row.id, 'status':row.status}).then(res => {
          if (res.success) {
            this.$message.success('设置成功！')
          } else {
            return this.$message.error('设置失败！')
          }
        })
      },

      async showEditDialog(id) {
        Api.getMemberChargeCategory({'id':id}).then(res => {
          if (res.success) {
            this.editForm = res.data
            this.editDialogVisible = true
          } else {
            return this.$message.error('查询失败')
          }
        })
      },

      moveUp(item, index) {
        this.categoryList.splice(index - 1, 0, item);
        this.categoryList.splice(index + 1, 1);
        this.setMoveUpAndDown();
      },
      // 下移
      moveDown(item, index) {
        this.categoryList.splice(index + 2, 0, item);
        this.categoryList.splice(index, 1);
        this.setMoveUpAndDown();
      },
      getFormLength(index) {
        if (index === this.categoryList.length - 1) return true;
        else return false;
      },
      setMoveUpAndDown() {
        var ids = "";
        for( let i of this.categoryList){
          ids = ids.concat(i.id, ",");
        }
        ids = ids.substr(0,ids.length-1);
        Api.setCategoryUpAndDown({'ids':ids}).then(res => {
          if (res.success) {
          } else {
            return this.$message.error('设置失败')
          }
        })
      },
      deleteCategory(id) {
        this.$confirm('确认删除吗？')
            .then(_ => {
              Api.deleteCategory({'id':id}).then((res) => {
                if (res.success) {
                  this.getCategoryList();
                  return this.$message.success("操作成功");
                } else {
                  return this.$message.error("操作失败：" + res.msg);
                }
              });
            }).catch(_ => {});
      },
      editDialogClosed() {

      },
      handleSizeChange(pageSize) {
        this.queryInfo.pageSize = pageSize;
        this.getCategoryList();
      },
      handleCurrentChange(pageNo) {
        this.queryInfo.pageNo = pageNo;
        this.getCategoryList();
      },
    }
};
</script>

<style lang="less" scoped>
.logo_pic {
  max-width: 100px;
}
.upload_img {
  width: 148px;
  height: 148px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 20px;
}
</style>
